<template>
    <div>
        <el-card class="box-card">
            <div slot="header">
                <el-form :inline="true" :model="stalist" size="mini" class="demo-form-inline">
                    <el-form-item>
                        <el-button type="danger" @click="deleteDDAll"
                            style="box-shadow: 2px 2px 5px black;">批量删除</el-button>
                    </el-form-item>
                    <el-form-item label="活动区域">
                        <el-select v-model="stalist.status_id" placeholder="请选择订单状态" @change="gaibian">
                            <el-option label="全部" value="0">全部</el-option>
                            <el-option v-for="(item, index) in sta" :key="index" :label="item.status_text"
                                :value="item.status_id">
                                {{ item.status_text }}
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <el-table :data="porder" stripe ref="multipleTable" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="quid" label="订单编号" width="150">
                </el-table-column>
                <el-table-column prop="multi_store" label="店名">
                </el-table-column>
                <el-table-column prop="created_time" label="下单时间">
                </el-table-column>
                <el-table-column prop="address" label="地址">
                </el-table-column>
                <el-table-column prop="phonenumber" label="手机号">
                </el-table-column>
                <el-table-column prop="user_name" label="点餐人姓名">
                </el-table-column>
                <el-table-column prop="amount" label="总价格">
                </el-table-column>
                <el-table-column prop="pay_mode" label="支付方式">
                </el-table-column>
                <el-table-column prop="status_text" label="订单状态">
                </el-table-column>
                <el-table-column prop="postscript" label="备注">
                </el-table-column>

                <el-table-column label="操作" width="160" fixed="right">

                    <template #default="{ row }">
                        <el-button type="info" slot="reference" size="small"
                            style="margin-right: 10px; box-shadow: 2px 2px 5px black;" @confirm="Details"
                            @click="Details(row)">详情 </el-button>
                        <el-popconfirm confirm-button-text='好的' cancel-button-text='不用了' icon="el-icon-info"
                            icon-color="red" title="确实删除此用户吗？" @confirm="deleteDD(row.id)">
                            <el-button type="danger" slot="reference" size="small"
                                style="box-shadow: 2px 2px 5px black;">删除</el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination style="margin-top: 15px;" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" :current-page="page" :page-size="size"
                :page-sizes="[5, 10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper" :total="count">
            </el-pagination>
        </el-card>

        <el-dialog title="详情" append-to-body width="800px" top="20vh" :visible.sync="editDialogFormVisible">
            <Details dialogVisible.sync="editDialogFormVisible" :data="editData" @refresh="getPorderList"></Details>
        </el-dialog>


    </div>
</template>

<script>

import Details from './Details.vue'



export default {
    sta: [],
    name: '',
    data() {
        return {
            status_id: 0,

            //复选框
            multipleSelection: [],

            //分页列表
            count: 0,
            size: 5,
            page: 1,
            porder: [],
            stalist: {
            },

            editData: {},

            editDialogFormVisible: false,
        }
    },
    created() {
        this.getPorderList();

    },
    methods: {
        getPorderList() {
            this.axios({
                method: 'get',
                url: 'DDmanage/Status',
                params: {},
                data: {}
            }).then(res => {
                this.sta = res.data.data;
            }).catch(err => {
                console.log('err: ', err);
            })


            this.axios({
                method: 'get',
                url: 'DDmanage/Porder',
                params: { page: this.page, limit: this.size, sid: this.status_id },
                data: {},
            }).then(res => {
                console.log('res: ', res);
                this.count = res.data.count;
                this.porder = res.data.data;
            }).catch(err => {
                console.log('err: ', err);
            })
        },
        gaibian() {
            this.status_id = this.stalist.status_id;
            this.getPorderList();
        },
        //切换每页条数
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.page = 1;
            this.size = val;
            this.getPorderList();
        },
        //翻页
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.page = val;
            this.getPorderList();
        },

        //详情 弹窗
        Details(row) {
            console.log('row: ', row);

            this.editData = row;
            this.editDialogFormVisible = true;

        },

        //删除单个数据
        deleteDD(id) {

            this.axios({
                method: 'delete',
                url: 'DDmanage',
                params: { id }

            }).then(res => {
                console.log('res: ', res);
                if (res.data.code > 0) {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });

                    this.getPorderList(); //刷新

                } else {
                    this.$message({
                        message: res.data.msg,
                        type: 'error'
                    })
                }
            }).catch(err => {
                console.log('err: ', err);
            })

        },
        //批量删除
        handleSelectionChange(val) {
            //保存选中的行数据
            this.multipleSelection = val;
        },
        deleteDDAll() {
            let ids = [];
            ids = this.multipleSelection.map(v => v.id);
            if (ids.length > 0) {
                this.$confirm('此操作将永久删除数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    this.axios({
                        method: 'delete',
                        url: 'DD/del',
                        data: ids
                    }).then(res => {
                        console.log('res: ', res);
                        if (res.data.code > 0) {
                            this.$message({
                                message: res.data.msg,
                                type: 'success'
                            });

                            this.getPorderList(); //刷新

                        } else {
                            this.$message({
                                message: res.data.msg,
                                type: 'error'
                            })
                        }
                    }).catch(err => {
                        console.log('err: ', err);
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            } else {
                this.$message({
                    message: '请选择需要删除的数据！',
                    type: 'warning'
                })
            }
            //批量删除的 id 数组
            console.log('ids: ', ids);
        },


    },

    components: {
        Details
    }


}
</script>

<style scoped>
/* .demo-form-inline {
        float: right;
    } */

.demo-form-inline .el-form-item {
    margin-bottom: 0px;
}
</style>